<template>
  <div class="m-add-wrap">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <el-form-item
        label="出发地"
      >
        <el-input v-model="dynamicValidateForm.startAddr" placeholder="请输入出发地"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(midItem, index) in dynamicValidateForm.midAddr"
        :label="'途径地' + (index+1)"
        :key="midItem.key"
      >
        <div class="m-mid-wrap">
          <el-input v-model="midItem.name" placeholder="请输入途径地"></el-input>
          <div>
            <span>一人：</span>
            <el-input v-model="midItem.price.one" placeholder="一人票价"></el-input>
          </div>
          <div>
            <span>二人：</span>
            <el-input v-model="midItem.price.two" placeholder="二人票价"></el-input>
          </div>
          <div>
            <span>三人：</span>
            <el-input v-model="midItem.price.three" placeholder="三人票价"></el-input>
          </div>
          <div>
            <span>包车：</span>
            <el-input v-model="midItem.price.all" placeholder="包车票价"></el-input>
          </div>
          <el-button @click.prevent="removeDomain(midItem)">删除</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addDomain">新增途径地</el-button>
        <el-button @click="resetForm">重置</el-button>
        <div class="m-istop">
          是否设置为热门:
          <el-switch
            v-model="dynamicValidateForm.isTop"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import api from '@/fetch/api.js'
  export default {
    data() {
      return {
        dynamicValidateForm: {
          midAddr: [
            {
              name:'',
              price:{
                one: '',
                two: '',
                three: '',
                all: '',
              },
              key:Date.now()
            }
          ],
          startAddr: '',
          isTop:false,
        }
      };
    },
    mounted(){},
    methods: {
      routeAddFn:function(params){
        api.mRouteAdd(params)
         .then(res=>{
           if(res.code===1){
             // 添加成功
             this.$message({
              message: res.msg,
              type: 'success'
            });
            this.$router.push({path:'/Mpath/list'})
           }else{
             // 添加失败
            this.$message({
              message: res.msg,
              type: 'error'
            });
           }
        })
      },
      submitForm() {
        let _form = JSON.parse(JSON.stringify(this.dynamicValidateForm))
        let {startAddr,midAddr,isTop} = _form
        midAddr = JSON.stringify(midAddr)
        isTop = isTop === true ? 1: 0
        this.routeAddFn(
          {startAddr,midAddr,isTop}
        )
      },
      resetForm() {
        this.dynamicValidateForm = {
          midAddr: [],
          startAddr: ''
        }
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.midAddr.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.midAddr.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.midAddr.push({
          name: '',
          price:{
            one: '',
            two: '',
            three: '',
            all: '',
          },
          key: Date.now()
        });
      }
    }
  }
</script>

<style>
.m-add-wrap{
  margin-top:30px;
}
.m-add-wrap .el-input{
  width:250px;
}
.m-mid-wrap{
  display: flex;
}
.m-mid-wrap .el-input{
  margin-right:10px;
  width: 140px;
}
.m-istop {
  display:inline-block;
  margin-left: 20px;
}
</style>
